// import "./style.css";
// import typescriptLogo from "./typescript.svg";
// import { setupCounter } from "../lib";

// const oldHtml = `
//   <div>
//     <a href="https://vite.dev" target="_blank">
//       <img src="/vite.svg" class="logo" alt="Vite logo" />
//     </a>
//     <a href="https://www.typescriptlang.org/" target="_blank">
//       <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
//     </a>
//     <h1>Vite + TypeScript</h1>
//     <div class="card">
//       <button id="counter" type="button"></button>
//     </div>
//     <p class="read-the-docs">
//       Click on the Vite and TypeScript logos to learn more
//     </p>
//   </div>
// `;
// const app = document.querySelector<HTMLDivElement>("#app");
// app!.innerHTML = oldHtml;
// setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);

import "./assets/styles/reset.css";
import "./assets/styles/flex.min.css";
import "./assets/styles/page.min.css";

import * as utils from "../lib/utils";
import pkg from "../package.json";

const app = document.querySelector<HTMLDivElement>("#app");
app!.innerHTML = getLayoutHtml(utils);

function getLayoutHtml(utils: any) {
  console.log(utils, Object.keys(utils), "dddddddd0");
  const keys = Object.keys(utils);
  const appName = pkg.name
    .split("-")
    .map((it) => it.charAt(0).toUpperCase() + it.slice(1))
    .join("-");
  const lis = keys.map((it) => `<li class="item f-fs-c">${it}</li>`).join("");
  return `
<div class="layout f-sb-s">
  <div class="menu f-0 f-fs-s-c">
    <h1 class="h1 f-0 f-c-c">${appName}</h1>
    <ul class="navs">
    ${lis}
    </ul>
  </div>
  <div class="main f-1">
    暂无内容。
  </div>
</div>
`;
}
